<template>
  <div style="height:100%;display: flex;flex-direction: column;">
    <div class="header-bar" style="padding-top:10px">
      <span class="float-left" style="line-height: 31px">

        <h3><Lang zh="权限配置" en="Permission Config"/> {{ currentRole ? ':' + currentRole.name + ' - ' + currentRole.sn : '' }}</h3>
      </span>

    </div>
    <div class="list" style="line-height: 30px;overflow-y: scroll;padding:10px;border:1px solid #eeeeee;">

      <div v-for="it in allPermission" :key="it.key">
        <div class="form-group-header">
          <Checkbox v-model="selectPermission" :value="it.key"><i :class="it.icon"></i>{{ decode(it.title) }}</Checkbox>
          <span v-if="it.children" class="per-actions">
             <span class="link" @click="checkAll(it)"><Lang zh="全选" en="All"/></span>/<span class="link" @click="unCheckAll(it)"><Lang zh="全取消" en="Cancel"/></span>
          </span>
        </div>
        <div v-for="sub in it.children" :key="sub.key" style="padding-left: 30px">
          <div>
            <Checkbox v-model="selectPermission" :value="sub.key"><i :class="sub.icon"></i>{{ decode(sub.title) }}</Checkbox>
            <span  v-if="sub.children" class="per-actions">
              <span class="link"  @click="checkAll(sub)"><Lang zh="全选" en="All"/></span>/<span class="link"  @click="unCheckAll(sub)"><Lang zh="全取消" en="Cancel"/></span>
            </span>
          </div>
          <div style="padding-left:30px;">
               <span :class="hasCascadeChildren(sub)?'has-cascade':'no-cascade'" v-for="per in sub.children" :key="per.key">
                <Checkbox v-model="selectPermission" :value="per.key">
                  <i :class="per.icon"></i>{{ decode(per.title) }}
                </Checkbox>
                <span  v-if="per.children" class="per-actions">
                  <span class="link"  @click="checkAll(per)"><Lang zh="全选" en="All"/></span>/<span class="link"  @click="unCheckAll(per)"><Lang zh="全取消" en="Cancel"/></span>
                </span>
                 <div style="padding-left: 30px">
                   <span v-for="four in per.children" :key="four.key">
                      <Checkbox v-model="selectPermission" :value="four.key">
                        <i :class="four.icon"></i>{{ decode(four.title) }}
                      </Checkbox>
                   </span>
                 </div>
              </span>
          </div>
        </div>
      </div>
    </div>
    <footer  style="text-align: right;padding-top: 8px" >
      <Button icon="h-icon-check"  color="primary" :loading="permissionSaving" @click="savePermission" :disabled="!currentRole"><Lang zh="保存"/></Button>
      <Button icon="h-icon-close" @click="doClose"><Lang zh="关闭"/></Button>
    </footer>
  </div>
</template>
<script>
import {ajax} from 'framework'
import {message} from 'heyui'
import {decode} from 'i18n'
export default {
  name: "RolePermission",
  emits:['close'],
  props: {
    allPermission: Array,
    role: Object
  },
  data() {
    return {
      currentRole: null,
      permissionSaving: false,
      selectPermission: []
    }
  },
  mounted(){
    if(this.role){
      this.switchRole(this.role)
    }
  },
  watch: {
    role(v) {
      this.switchRole(v)
    }
  },
  methods: {
    decode:decode,
    doClose(){
      this.$emit("close")
    },
    hasCascadeChildren(dt){
      if(dt.cascade!=undefined){
        return dt.cascade
      }
      dt.cascade=false
      if(dt.children&&dt.children.length>0){
       for(let sub of dt.children){
         if(sub.children&&sub.children.length>0){
           dt.cascade=true
         }
       }
      }
      return dt.cascade
      //return dt.children&&dt.children.length>0
    },
    switchRole(dt) {
      ajax.get('role/role_permission', {role: dt.sn}).then(r => {
        this.currentRole = dt
        this.selectPermission = r.data
      })
    },
    checkAll(it){
      if(this.selectPermission.indexOf(it.key)==-1){
        this.selectPermission.push(it.key)
      }
      if(it.children){
        for(let sub of it.children){
          this.checkAll(sub)
        }
      }
    },
    unCheckAll(it){
      let idx=this.selectPermission.indexOf(it.key);
      if(idx>-1){
        this.selectPermission.splice(idx,1)
      }
      if(it.children){
        for(let sub of it.children){
          this.unCheckAll(sub)
        }
      }
    },
    savePermission() {
      if (this.currentRole == null) {
        message("权限未选择")
        return
      }
      if (this.selectPermission == null) {
        this.selectPermission = []
      }
      this.permissionSaving = true
      ajax.post('role/save_role_permission/'+this.currentRole.sn, this.selectPermission).then(r => {
        message('已保存')
      }).finally(r => {
        this.permissionSaving = false
      })
    }
  }
}
</script>
<style scoped>
  /*.h-checkbox-text{*/
  /*  font-size: 13px;*/
  /*  font-weight: normal;*/
  /*}*/
  .per-actions{
    line-height: 20px;
    height: 20px;
    vertical-align: top;
    padding: 2px 10px;
    display: inline-block;
    float: right;
  }
  .h-checkbox-text i{
    padding: 0px 3px 0px 6px;
  }
  .has-cascade{
    display:block;
  }
  .no-cascade{
    display: inline-block;
    margin-right:20px;
  }
</style>
